<template>
	<view class="container">
		<!-- 导航栏 -->
		<view class="navbar">
			<view class="back-btn" @click="navigateBack">
				<uni-icons type="left" size="30" color="#333"></uni-icons>
			</view>
			<view class="title">类别管理</view>
			<view class="add-btn" @click="showAddCategoryModal">
				<uni-icons type="plus" size="28" color="#fff"></uni-icons>
			</view>
		</view>

		<!-- 主内容区 -->
		<scroll-view class="main-content" scroll-y>
			<!-- 无类别提示 -->
			<view v-if="categories.length === 0" class="empty-state">
				<uni-icons type="list" size="60" color="#ccc"></uni-icons>
				<text class="empty-text">暂无类别数据</text>
				<button class="empty-btn" @click="showAddCategoryModal">添加第一个类别</button>
			</view>

			<!-- 类别列表 -->
			<view v-else class="category-list">
				<view v-for="category in categories" :key="category.id" class="category-item">
					<!-- 大类信息 -->
					<view class="category-header">
						<view class="category-info">
							<!-- 类别图片 - 修复空值访问 -->
							<view class="category-img">
								<image :src="category.img.url || '/static/default-category.png'" mode="aspectFill" ></image>
							</view>

							<!-- 类别名称和ID -->
							<view class="category-details">
								<view class="category-name"  >{{ category.name||'未命名分类' }}</view>
								<view class="category-id">ID: {{ category.id }}</view>
							</view>
						</view>

						<!-- 大类操作按钮 -->
						<view class="category-actions">
							<view class="action-btn edit" @click="editCategory(category)">
								<uni-icons type="compose" size="24" color="#007aff"></uni-icons>
							</view>
							<view class="action-btn delete" @click="confirmDeleteCategory(category)">
								<uni-icons type="trash" size="24" color="#e64340"></uni-icons>
							</view>
							<view class="action-btn toggle" @click="toggleSubCategory(category)">
								<uni-icons :type="category.showSub ? 'up' : 'down'" size="24" color="#666"></uni-icons>
							</view>
						</view>
					</view>

					<!-- 子类列表 -->
					<view v-if="category.showSub" class="subcategory-list">
						<view v-for="(sub, subIndex) in category.subCategory" :key="sub.id || subIndex" class="subcategory-item">
							<view class="subcategory-name" v-if="sub.name">{{ sub.name ||'未命名分类'}}</view>
							<view class="subcategory-id" v-if="sub.id">ID: {{ sub.id }}</view>
							<view class="subcategory-actions">
								<view class="sub-action edit" @click="editSubCategory(category, sub, subIndex)">
									<uni-icons type="compose" size="22" color="#007aff"></uni-icons>
								</view>
								<view class="sub-action delete" @click="confirmDeleteSubCategory(category, subIndex)">
									<uni-icons type="trash" size="22" color="#e64340"></uni-icons>
								</view>
							</view>
						</view>

						<!-- 添加子类按钮 -->
						<view class="add-subcategory" @click="showAddSubCategoryModal(category)">
							<uni-icons type="plus" size="20" color="#007aff"></uni-icons>
							<text>添加子类别</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 添加/编辑大类弹窗 -->
		<uni-popup ref="categoryPopup" type="center" :mask-click="false" class="category-modal">
			<view class="parentPopup">
				<view class="modal-header">
					<text>{{ isEditingCategory ? '编辑大类' : '添加大类' }}</text>
					<uni-icons type="close" size="24" color="#666" @click="closeCategoryPopup"></uni-icons>
				</view>

				<view class="modal-body">
					<uni-forms ref="categoryForm" :model="currentCategory" :rules="categoryRules" label-width="auto">
						<!-- 大类ID：自动生成，禁用输入框 -->
						<uni-forms-item label="类别ID" name="id">
							<uni-easyinput v-model="currentCategory.id" placeholder="自动生成" disabled></uni-easyinput>
						</uni-forms-item>

						<uni-forms-item label="类别名称" name="name" required>
							<uni-easyinput v-model="currentCategory.name" placeholder="请输入类别名称"></uni-easyinput>
						</uni-forms-item>

						<uni-forms-item label="类别图片">
							<view class="upload-img-container">
								<view class="uploaded-img" v-if="currentCategory.img.url">
									<image :src="currentCategory.img.url" mode="aspectFill"></image>
									<uni-icons type="clear" size="20" color="#fff" @click.stop="clearCategoryImage"></uni-icons>
								</view>
								<view class="upload-btn" @click="chooseCategoryImage">
									<uni-icons type="camera" size="28" color="#fff"></uni-icons>
									<text>选择图片</text>
								</view>
							</view>
						</uni-forms-item>
					</uni-forms>
				</view>

				<view class="modal-footer">
					<button class="cancel-btn" @click="closeCategoryPopup">取消</button>
					<button class="confirm-btn" @click="submitCategoryForm">
						{{ isEditingCategory ? '更新' : '保存' }}
					</button>
				</view>
			</view>
		</uni-popup>

		<!-- 添加/编辑子类弹窗 -->
		<uni-popup ref="subCategoryPopup" type="center" :mask-click="false" class="subcategory-modal">
			<view class="subPopup">
				<view class="modal-header">
					<text  v-if="parentCategory&&parentCategory.name">{{ isEditingSubCategory ? `编辑"${parentCategory.name}"子类` : '添加子类' }}</text>
					<uni-icons type="close" size="24" color="#666" @click="closeSubCategoryPopup"></uni-icons>
				</view>

				<view class="modal-body">
					<uni-forms ref="subCategoryForm" :model="currentSubCategory" :rules="subCategoryRules" label-width="auto">
						<uni-forms-item label="子类ID" name="id">
							<uni-easyinput v-model="currentSubCategory.id" placeholder="未填写则自动生成" :disabled="isEditingSubCategory"></uni-easyinput>
						</uni-forms-item>

						<uni-forms-item label="子类名称" name="name" required>
							<uni-easyinput v-model="currentSubCategory.name" placeholder="请输入子类名称"></uni-easyinput>
						</uni-forms-item>
					</uni-forms>
				</view>

				<view class="modal-footer">
					<button class="cancel-btn" @click="closeSubCategoryPopup">取消</button>
					<button class="confirm-btn" @click="submitSubCategoryForm">
						{{ isEditingSubCategory ? '更新' : '保存' }}
					</button>
				</view>
			</view>
		</uni-popup>

		<!-- 确认删除弹窗 -->
		<uni-popup  ref="deleconfirm"  v-model="confirmDeleteVisible" mode="center" class="confirm-modal">
			<view class="confirm-container">
				<view class="confirm-title">确认删除</view>
				<view class="confirm-content">{{ deleteConfirmText }}</view>
				<view class="confirm-buttons">
					<button class="confirm-cancel" @click="confirmDeleteVisible = false">取消</button>
					<button class="confirm-ok" @click="executeDelete">确认</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
const db = uniCloud.database();
const categoryCollection = db.collection('category');

export default {
	data() {
		return {
			// 类别列表数据
			categories: [],

			// 弹窗控制
			categoryModalVisible: false,
			subCategoryModalVisible: false,
			confirmDeleteVisible: false,

			// 当前操作的类别（img初始化为空对象，避免空值访问）
			currentCategory: {
				id: '',
				name: '',
				img: { url: '', fileID: '' },
				subCategory: []
			},

			// 当前操作的子类别
			currentSubCategory: {
				id: '',
				name: ''
			},

			// 编辑状态标记
			isEditingCategory: false,
			isEditingSubCategory: false,

			// 父类别信息（用于子类别操作）
			parentCategory: null,
			subCategoryIndex: -1,

			// 删除确认信息
			deleteConfirmText: '',
			deleteType: '', // 'category' 或 'subcategory'
			deleteData: null,

			// 表单验证规则
			categoryRules: {
				id: {
					rules: [
						{
							validator: (rule, value, callback) => {
								// 检查ID是否已存在（排除当前编辑的类别）
								const exists = this.categories.some((cat) => cat.id === value && !(this.isEditingCategory && this.currentCategory.id === value));
								exists ? callback('该类别ID已存在') : callback();
							}
						}
					]
				},
				name: {
					rules: [
						{ required: true, errorMessage: '请输入类别名称' },
						{ minLength: 2, errorMessage: '类别名称至少2个字符' }
					]
				}
			},

			subCategoryRules: {
				name: {
					rules: [
						{ required: true, errorMessage: '请输入子类名称' },
						{ minLength: 2, errorMessage: '子类名称至少2个字符' }
					]
				}
			},

			// 临时图片文件ID（用于取消时删除）
			tempImageFileId: null
		};
	},

	onLoad() {
		this.loadAllCategories();
	},

	methods: {
		// 返回上一页
		navigateBack() {
			uni.navigateBack({ delta: 1 });
		},

		// 通用ID生成方法：前缀+秒级时间戳+4位随机数，保证唯一性
		generateId(prefix = 'cat') {
			const timestamp = Date.now().toString().slice(0, 10); // 秒级时间戳（缩短长度）
			const random = Math.floor(Math.random() * 9000 + 1000).toString(); // 4位随机数（1000-9999）
			return `${prefix}_${timestamp}_${random}`;
		},

		// 加载所有类别
		async loadAllCategories() {
			try {
				uni.showLoading({ title: '加载中...' });
				const result = await categoryCollection.where({ userId: 'system' }).get();
         
				if (result.result.data && result.result.data.length > 0) {
					// 格式化类别数据（添加展开/收起状态 + img兜底）
					this.categories = result.result.data[0].category.map((cat) => ({
						...cat,
						showSub: false,
						docId: result.result.data[0]._id,
						img: cat.img || { url: '', fileID: '' } // 兜底img字段，避免空值
					}));
			
				} else {
					this.categories = [];
				}
			} catch (error) {
				console.error('加载类别失败:', error);
				uni.showToast({ title: '加载失败', icon: 'none' });
			} finally {
				uni.hideLoading();
			}
		},

		// --- 大类操作方法 ---

		// 显示添加大类弹窗：自动生成ID
		showAddCategoryModal() {
			this.isEditingCategory = false;
			// 自动生成大类唯一ID
			const autoGenId = this.generateId('cat');
			this.currentCategory = {
				id: autoGenId,
				name: '',
				img: { url: '', fileID: '' },
				subCategory: []
			};
			this.tempImageFileId = null;
			this.$refs.categoryPopup.open();
		},

		// 显示编辑大类弹窗
		editCategory(category) {
			this.isEditingCategory = true;
			this.currentCategory = JSON.parse(
				JSON.stringify({
					...category,
					img: category.img || { url: '', fileID: '' } // 兜底img字段
				})
			);
			this.tempImageFileId = null;
			this.$refs.categoryPopup.open();
		},

		// 关闭大类弹窗
		closeCategoryPopup() {
			this.$refs.categoryPopup.close();
			// 清理临时图片
			this.clearTempImage();
		},

		// 提交大类表单（新增/更新）
		async submitCategoryForm() {
			try {
				const valid = await this.$refs.categoryForm.validate();
				if (!valid) return;

				uni.showLoading({ title: '处理中...' });
				const { docId } = this.currentCategory;

				if (this.isEditingCategory) {
					// 更新大类
					await this.updateCategory(docId);
				} else {
					// 新增大类
					await this.addCategory();
				}

				this.closeCategoryPopup();
				
				uni.showToast({ title: this.isEditingCategory ? '更新成功' : '添加成功' });
				this.loadAllCategories();
			} catch (error) {
				console.error('提交大类表单失败:', error);
				uni.showToast({ title: error.message || '操作失败', icon: 'none' });
			} finally {
				uni.hideLoading();
			}
		},

		// 新增大类
		async addCategory() {
			const { docId, categoryArray } = await this.getOrCreateMainCategoryDoc();
			const newCategory = { ...this.currentCategory };

			// 移除临时属性
			delete newCategory.docId;
			delete newCategory.showSub;
			delete newCategory.index;

			categoryArray.push(newCategory);
			await this.updateMainCategoryDoc(docId, categoryArray);
		},

		// 更新大类
		async updateCategory(docId) {
			const { categoryArray } = await this.getMainCategoryDoc(docId);
			const index = categoryArray.findIndex((cat) => cat.id === this.currentCategory.id);

			if (index === -1) throw new Error('类别不存在');

			// 更新类别数据
			categoryArray[index] = {
				...categoryArray[index],
				...this.currentCategory,
				docId: undefined,
				showSub: undefined,
				index: undefined
			};

			await this.updateMainCategoryDoc(docId, categoryArray);
		},

		// --- 子类操作方法 ---

		// 显示添加子类弹窗
		showAddSubCategoryModal(parentCategory) {
			this.isEditingSubCategory = false;
			this.parentCategory = parentCategory;
			this.currentSubCategory = { id: '', name: '' };
			this.$refs.subCategoryPopup.open();
		},

		// 显示编辑子类弹窗
		editSubCategory(parentCategory, subCategory, subIndex) {
			console.log("更改子类",JSON.stringify(parentCategory));
			this.isEditingSubCategory = true;
			this.parentCategory = parentCategory;
			this.subCategoryIndex = subIndex;
			this.currentSubCategory = JSON.parse(JSON.stringify(subCategory));
			this.$refs.subCategoryPopup.open();
		},

		// 关闭子类弹窗
		closeSubCategoryPopup() {
			this.$refs.subCategoryPopup.close();
			
			this.parentCategory = null;
			this.subCategoryIndex = -1;
		
		},

		// 提交子类表单（新增/更新）
		async submitSubCategoryForm() {
			try {
				const valid = await this.$refs.subCategoryForm.validate();
				if (!valid) return;

				uni.showLoading({ title: '处理中...' });
				const { docId } = this.parentCategory;
                console.log(docId);
				if (this.isEditingSubCategory) {
					// 更新子类
					    console.log("文档ID",docId);
					await this.updateSubCategory(docId);
				} else {
					// 新增子类
					await this.addSubCategory(docId);
				}
               console.log('4545555555555555555');
				this.closeSubCategoryPopup();
				uni.showToast({ title: this.isEditingSubCategory ? '更新成功' : '添加成功' });
				this.loadAllCategories();
			} catch (error) {
				console.error('提交子类表单失败:', error);
				uni.showToast({ title: error.message || '操作失败', icon: 'none' });
			} finally {
				uni.hideLoading();
			}
		},

		// 新增子类：优化ID生成规则
		async addSubCategory(docId) {
			const { categoryArray } = await this.getMainCategoryDoc(docId);
			const parentIndex = categoryArray.findIndex((cat) => cat.id === this.parentCategory.id);

			if (parentIndex === -1) throw new Error('父类别不存在');

			// 子类ID：未填写则自动生成（前缀关联父类ID，便于识别）
			const subCategoryId = this.currentSubCategory.id || this.generateId(`sub_${this.parentCategory.id}`);

			categoryArray[parentIndex].subCategory = categoryArray[parentIndex].subCategory || [];
			categoryArray[parentIndex].subCategory.push({
				...this.currentSubCategory,
				id: subCategoryId
			});

			await this.updateMainCategoryDoc(docId, categoryArray);
		},

		// 更新子类
		async updateSubCategory(docId) {
			const { categoryArray } = await this.getMainCategoryDoc(docId);
			const parentIndex = categoryArray.findIndex((cat) => cat.id === this.parentCategory.id);

			if (parentIndex === -1) throw new Error('父类别不存在');
			if (!categoryArray[parentIndex].subCategory) throw new Error('子类列表不存在');

			categoryArray[parentIndex].subCategory[this.subCategoryIndex] = JSON.parse(JSON.stringify(this.currentSubCategory))  ;
	    	await this.updateMainCategoryDoc(docId,categoryArray);
		},

		// --- 删除操作方法 ---

		// 确认删除大类
		confirmDeleteCategory(category) {
			this.deleteType = 'category';
			this.deleteData = category;
			this.deleteConfirmText = `确定要删除大类"${category.name}"吗？删除后将同时删除其下所有子类。`;
			this.confirmDeleteVisible = true;
		},

		// 确认删除子类
		confirmDeleteSubCategory(parentCategory, subIndex) {
			const subCategory = parentCategory.subCategory[subIndex];
			this.deleteType = 'subcategory';
			this.deleteData = { parentCategory, subIndex };
			this.deleteConfirmText = `确定要删除子类"${subCategory.name}"吗？`;
			this.confirmDeleteVisible = true;
			this.$refs.deleconfirm.open()
		},

		// 执行删除操作
		async executeDelete() {
			try {
				uni.showLoading({ title: '删除中...' });

				if (this.deleteType === 'category') {
					await this.deleteCategory(this.deleteData);
				} else if (this.deleteType === 'subcategory') {
					await this.deleteSubCategory(this.deleteData);
				}

				this.confirmDeleteVisible = false;
				
				uni.showToast({ title: '删除成功' });
				this.loadAllCategories();
			} catch (error) {
				console.error('执行删除操作失败:', error);
				uni.showToast({ title: error.message || '删除失败', icon: 'none' });
			} finally {
				uni.hideLoading();
				this.$refs.deleconfirm.close()
			}
		},

		// 删除大类：优化图片判空
		async deleteCategory(category) {
			const { docId, categoryArray } = await this.getMainCategoryDoc(category.docId);
			const index = categoryArray.findIndex((cat) => cat.id === category.id);

			if (index === -1) throw new Error('类别不存在');

			// 删除类别图片（先判空，避免访问null属性）
			if (category.img && category.img.fileID) {
				await uniCloud.deleteFile({ fileList: [category.img.fileID] });
			}

			categoryArray.splice(index, 1);
			await this.updateMainCategoryDoc(docId, categoryArray);
		},

		// 删除子类
		async deleteSubCategory({ parentCategory, subIndex }) {
			const { docId, categoryArray } = await this.getMainCategoryDoc(parentCategory.docId);
			const parentIndex = categoryArray.findIndex((cat) => cat.id === parentCategory.id);

			if (parentIndex === -1) throw new Error('父类别不存在');
			if (!categoryArray[parentIndex].subCategory) throw new Error('子类列表不存在');

			categoryArray[parentIndex].subCategory.splice(subIndex, 1);
			await this.updateMainCategoryDoc(docId, categoryArray);
		},

		// --- 图片上传方法 ---

		// 选择类别图片
		async chooseCategoryImage() {
			try {
				const res = await uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera']
				});

				const tempFilePath = res.tempFilePaths[0];
				const categoryId = this.currentCategory.id || Date.now();
				const cloudPath = `shop/category/${categoryId}-${Math.floor(Math.random() * 1000)}.png`;

				// 上传新图片前，删除旧的临时图片（先判空）
				if (this.tempImageFileId) {
					await this.clearTempImage();
				}

				// 上传图片
				const uploadResult = await uniCloud.uploadFile({
					cloudPath,
					filePath: tempFilePath
				});

				// 获取临时URL
				const tempUrlResult = await uniCloud.getTempFileURL({
					fileList: [uploadResult.fileID]
				});

				// 更新当前类别图片信息
				this.currentCategory.img = {
					url: tempUrlResult.fileList[0].tempFileURL,
					fileID: uploadResult.fileID
				};

				// 保存临时文件ID（用于取消时删除）
				this.tempImageFileId = uploadResult.fileID;
			} catch (error) {
				console.error('选择/上传图片失败:', error);
				uni.showToast({ title: '图片上传失败', icon: 'none' });
			}
		},

		// 清空类别图片：重置为空对象
		async clearCategoryImage() {
			await this.clearTempImage();
			this.currentCategory.img = { url: '', fileID: '' };
		},

		// 清理临时图片
		async clearTempImage() {
			if (this.tempImageFileId) {
				try {
					await uniCloud.deleteFile({ fileList: [this.tempImageFileId] });
				} catch (error) {
					console.error('删除临时图片失败:', error);
				} finally {
					this.tempImageFileId = null;
				}
			}
		},

		// --- 公共辅助方法 ---

		// 获取主文档（包含类别数组）
		async getMainCategoryDoc(docId) {
			const result = await categoryCollection.doc(docId).get();
			console.log("结果",result.result.data);
			if (!result.result.data || !result.result.data[0].category) {
				throw new Error('类别主文档不存在');
			}
			return {
				docId,
				categoryArray: [...result.result.data[0].category] // 返回副本，避免直接修改原数据
			};
		},

		// 获取或创建主文档
		async getOrCreateMainCategoryDoc() {
			const result = await categoryCollection.where({ userId: 'system' }).get();

			if (result.result.data && result.result.data.length > 0) {
				return {
					docId: result.result.data[0]._id,
					categoryArray: [...result.result.data[0].category]
				};
			} else {
				// 创建新文档
				const addResult = await categoryCollection.add({
					userId: 'system',
					category: []
				});
				return {
					docId: addResult.id,
					categoryArray: []
				};
			}
		},

		// 更新主文档
		async updateMainCategoryDoc(docId, categoryArray) {
			console.log(docId,categoryArray);
			const result = await categoryCollection.doc(docId).update({
				category: categoryArray
			});
			console.log("更新后",result.result.updated);
			if (result.result.updated !== 1) {
				throw new Error('更新类别失败');
			}
		},

		// 切换子类展开/收起状态
		toggleSubCategory(category) {
			category.showSub = !category.showSub;
		}
	}
};
</script>

<style lang="scss" scoped>
/* 整体容器样式 */
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
}

/* 导航栏样式 */
.navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 44px;
	padding: 0 16px;
	background-color: #fff;
	border-bottom: 1px solid #eee;
	position: sticky;
	top: 0;
	z-index: 10;
}
.subPopup {
	background-color: #fff;
}
.back-btn {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.title {
	font-size: 18px;
	font-weight: 500;
	color: #333;
}

.add-btn {
	width: 36px;
	height: 36px;
	background-color: #007aff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 主内容区样式 */
.main-content {
	min-height: calc(100vh - 44px);
	padding-bottom: 20px;
}

/* 空状态样式 */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
	text-align: center;
}

.empty-text {
	font-size: 16px;
	color: #999;
	margin: 20px 0;
}

.empty-btn {
	background-color: #007aff;
	color: #fff;
	border-radius: 20px;
	padding: 8px 24px;
	font-size: 14px;
}

/* 类别列表样式 */
.category-list {
	padding: 10px;
}

.category-item {
	background-color: #fff;
	border-radius: 8px;
	margin-bottom: 10px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.category-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
}

.category-info {
	display: flex;
	align-items: center;
	flex: 1;
}

.category-img {
	width: 48px;
	height: 48px;
	border-radius: 6px;
	overflow: hidden;
	margin-right: 12px;
}

.category-img image {
	width: 100%;
	height: 100%;
}

.category-details {
	display: flex;
	flex-direction: column;
}

.category-name {
	font-size: 16px;
	font-weight: 500;
	color: #333;
}

.category-id {
	font-size: 12px;
	color: #999;
	margin-top: 4px;
}

.category-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.action-btn {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background-color 0.2s;
}

.action-btn.edit:hover {
	background-color: #f0f7ff;
}

.action-btn.delete:hover {
	background-color: #ffebee;
}

.action-btn.toggle:hover {
	background-color: #f5f5f5;
}

/* 子类列表样式 */
.subcategory-list {
	background-color: #f9f9f9;
	padding: 8px 16px;
	border-top: 1px solid #f0f0f0;
}

.subcategory-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid #f0f0f0;
}

.subcategory-item:last-child {
	border-bottom: none;
}

.subcategory-name {
	font-size: 15px;
	color: #333;
}

.subcategory-id {
	font-size: 11px;
	color: #999;
	margin-top: 2px;
}

.subcategory-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sub-action {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background-color 0.2s;
}

.sub-action.edit:hover {
	background-color: #f0f7ff;
}

.sub-action.delete:hover {
	background-color: #ffebee;
}

.add-subcategory {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #007aff;
	font-size: 14px;
	padding: 10px 0;
	cursor: pointer;
}

/* 弹窗样式 */
.category-modal,
.subcategory-modal {
	width: 50%;
	border-radius: 16px 16px 0 0;
	background-color: #fff;
	padding-bottom: env(safe-area-inset-bottom);
}
.parentPopup {
	background-color: #fff;
	
}
.modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px;
	border-bottom: 1px solid #eee;
}

.modal-header text {
	font-size: 18px;
	font-weight: 500;
	color: #333;
}

.modal-body {
	padding: 16px;
}

.uni-forms-item {
	margin-bottom: 16px;
}

.upload-img-container {
	display: flex;
	align-items: center;
	gap: 16px;
}

.uploaded-img {
	width: 120px;
	height: 120px;
	border-radius: 8px;
	overflow: hidden;
	position: relative;
}

.uploaded-img image {
	width: 100%;
	height: 100%;
}

.uploaded-img uni-icons {
	position: absolute;
	top: -8px;
	right: -8px;
	background-color: rgba(230, 67, 64, 0.9);
	border-radius: 50%;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.upload-btn {
	width: 120px;
	height: 120px;
	border: 1px dashed #ddd;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #999;
	font-size: 14px;
}

.upload-btn uni-icons {
	margin-bottom: 8px;
}

.modal-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px;
	border-top: 1px solid #eee;
}

.cancel-btn,
.confirm-btn {
	width: 48%;
	height: 44px;
	border-radius: 8px;
	font-size: 16px;
}

.cancel-btn {
	background-color: #f5f5f5;
	color: #333;
}

.confirm-btn {
	background-color: #007aff;
	color: #fff;
}

/* 确认删除弹窗 */
.confirm-modal {
	width: 85%;
}

.confirm-container {
	background-color: #fff;
	border-radius: 12px;
	padding: 24px;
	text-align: center;
}

.confirm-title {
	font-size: 18px;
	font-weight: 500;
	color: #333;
	margin-bottom: 16px;
}

.confirm-content {
	font-size: 16px;
	color: #666;
	margin-bottom: 24px;
	line-height: 1.5;
}

.confirm-buttons {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.confirm-cancel,
.confirm-ok {
	width: 48%;
	height: 44px;
	border-radius: 8px;
	font-size: 16px;
}

.confirm-cancel {
	background-color: #f5f5f5;
	color: #333;
}

.confirm-ok {
	background-color: #e64340;
	color: #fff;
}
</style>
